<script setup lang="ts" name="color">
import { reactive } from 'vue';
const colorScales = reactive([
    // 1. 蓝色系（信任、专业）
    {
        id: 1,
        name: "专业蓝",
        start: "#e6f4ff",
        end: "#1890ff",
        colorScale: ["#e6f4ff", "#bae0ff", "#91c7ff", "#69b1ff", "#1890ff"]
    },
    
    // 2. 红色系（活力、警示）
    {
        id: 2,
        name: "活力红",
        start: "#fff1f0",
        end: "#f5222d",
        colorScale: ["#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#f5222d"]
    },
    
    // 3. 绿色系（成功、健康）
    {
        id: 3,
        name: "健康绿",
        start: "#f6ffed",
        end: "#52c41a",
        colorScale: ["#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#52c41a"]
    },
    
    // 4. 黄色系（活力、警示）
    {
        id: 4,
        name: "阳光黄",
        start: "#fffbe6",
        end: "#faad14",
        colorScale: ["#fffbe6", "#fff380", "#ffec3d", "#ffe500", "#faad14"]
    },
    
    // 5. 紫色系（创意、高贵）
    {
        id: 5,
        name: "创意紫",
        start: "#f9f0ff",
        end: "#722ed1",
        colorScale: ["#f9f0ff", "#efdbff", "#d3adf7", "#b37fe7", "#722ed1"]
    },
    
    // 6. 橙色系（热情、活力）
    {
        id: 6,
        name: "热情橙",
        start: "#fff7e6",
        end: "#fa8c16",
        colorScale: ["#fff7e6", "#fff0c8", "#ffe59e", "#ffd666", "#fa8c16"]
    },
    
    // 7. 灰色系（中性、专业）
    {
        id: 7,
        name: "中性灰",
        start: "#ffffff",
        end: "#1f2329",
        colorScale: ["#ffffff", "#f2f3f5", "#c9cdd4", "#86909c", "#1f2329"]
    },
    
    // 8. 青色系（科技、清新）
    {
        id: 8,
        name: "科技青",
        start: "#e6fffb",
        end: "#13c2c2",
        colorScale: ["#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#13c2c2"]
    },
    
    // 9. 粉色系（温柔、甜美）
    {
        id: 9,
        name: "温柔粉",
        start: "#fff0f6",
        end: "#eb2f96",
        colorScale: ["#fff0f6", "#ffd6e7", "#ffadd2", "#ff85c0", "#eb2f96"]
    },
    
    // 10. 棕色系（自然、稳重）
    {
        id: 10,
        name: "自然棕",
        start: "#f7f3e3",
        end: "#8c613d",
        colorScale: ["#f7f3e3", "#e9d8a6", "#dbbc7f", "#ca9a61", "#8c613d"]
    },
    {
        id: 11,
        name: "青绿色系",
        start: "#0f0f0e",
        end: "#19fac6",
        colorScale: [
            "#0f0f0e", 
            "#366454", 
            "#38967a", 
            "#3bc8a0",  
            "#19fac6"   
        ],
    },
    // 11. 靛蓝色系（沉稳、神秘）
    {
        id: 12,
        name: "深海靛",
        start: "#f0f5ff",
        end: "#165dff",
        colorScale: ["#f0f5ff", "#c9d8ff", "#9bb8ff", "#6994ff", "#165dff"]
    },

    // 12. 橄榄色系（自然、复古）
    {
        id: 13,
        name: "复古橄榄",
        start: "#f5f7e8",
        end: "#5d6940",
        colorScale: ["#f5f7e8", "#e6e9d3", "#cad0a8", "#aeb87b", "#5d6940"]
    },

    // 13. 珊瑚色系（活力、温暖）
    {
        id: 14,
        name: "活力珊瑚",
        start: "#fff5f2",
        end: "#ff7a45",
        colorScale: ["#fff5f2", "#ffd6cc", "#ffb39e", "#ff8f6d", "#ff7a45"]
    },

    // 14. 薄荷色系（清新、宁静）
    {
        id: 15,
        name: "薄荷冰",
        start: "#f0fff4",
        end: "#36d399",
        colorScale: ["#f0fff4", "#c6f7e2", "#8ef3c5", "#57d9a3", "#36d399"]
    },
    // 15. 藏青色系（专业、权威）
    {
        id: 16,
        name: "权威藏青",
        start: "#edf2f7",
        end: "#2c5282",
        colorScale: ["#edf2f7", "#cbd5e0", "#94a3b8", "#64748b", "#2c5282"]
    },

    // 16. 琥珀色系（温暖、华贵）
    {
        id: 17,
        name: "华贵琥珀",
        start: "#fff8e6",
        end: "#d97706",
        colorScale: ["#fff8e6", "#ffe8b7", "#ffd480", "#ffb74d", "#d97706"]
    },

    // 17. 莓红色系（热情、浪漫）
    {
        id: 18,
        name: "浪漫莓红",
        start: "#fff0f3",
        end: "#d63384",
        colorScale: ["#fff0f3", "#ffccd5", "#ff99b3", "#ff668c", "#d63384"]
    },

    // 18. 苔绿色系（自然、沉稳）
    {
        id: 19,
        name: "森林苔绿",
        start: "#f1f8e9",
        end: "#388e3c",
        colorScale: ["#f1f8e9", "#dcedc1", "#b7e1cd", "#81c784", "#388e3c"]
    },

    // 19. 蓝紫色系（创意、梦幻）
    {
        id: 20,
        name: "梦幻蓝紫",
        start: "#f3f0ff",
        end: "#7b1fa2",
        colorScale: ["#f3f0ff", "#e1bee7", "#ce93d8", "#ba68c8", "#7b1fa2"]
    }
])

const copyColor = (color: string) => {
    navigator.clipboard.writeText(color);
}
</script>

<template>
    <div class="color">
        <div class="header">
            <span class="title">Color</span>
            <span class="subtitle">网页设计应该具有一套<br/>统一的<b>颜色体系</b></span>
            <span class="text">网页设计的 “专业性” 很大程度体现在 “视觉一致性”，规定颜色能避免设计碎片化，让不同页面、不同模块的视觉风格统一，同时通过色彩搭配提升美观度</span>
        </div>
        <div class="colorScale">
            <div class="headline">
                <div class="title">
                    <span class="left">色阶</span>
                    <span class="right">“彩色的阶梯” 同一色系内，从浅到深、从亮到暗的渐变层次范围</span>                
                </div>
                <div class="tool">
                    <span class="left">色阶生成工具</span>
                    <a class="right" href="https://www.ysdaima.com/tools/subcolor" target="_blank">
                        https://www.ysdaima.com/tools/subcolor
                    </a>
                </div>
            </div>
            <div class="content">
                <div class="container" v-for="item in colorScales" :key="item.id">
                    <div class="top">
                        <div class="start">
                            <span class="left">起始颜色</span>
                            <span class="right" :style="{background: item.start}"></span>
                        </div>
                        <div class="end">
                            <span class="left">结束颜色</span>
                            <span class="right" :style="{background: item.end}"></span>
                        </div>
                        <div class="name" 
                            :style="{background: `linear-gradient(to right, ${item.start}, ${item.end})`,backgroundClip: 'text', WebkitBackgroundClip: 'text', color: 'transparent'}">
                        <span>{{ item.name }}</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="head">生成的色阶</div>
                        <div class="wrapper">
                            <div 
                            class="item" 
                            v-for="color in item.colorScale" 
                            :key="color" 
                            :style="{background: color}"
                            @dblclick="copyColor(color)"
                            ></div>
                        </div>
                        <div class="footer">
                            <div 
                            class="item" 
                            v-for="color in item.colorScale" 
                            :key="color">{{ color }}</div>
                        </div>
                    </div>                
                </div>
            </div>            
        </div>
<!--         <div class="colorSystem">
            <div class="headline">
                <div class="title">
                    <span class="left">色系</span>
                    <span class="right">围绕一个基础色（或一组关联色） ，通过调整颜色的关键属性（如明度、饱和度、色相偏差等），形成的具有统一风格、视觉协调性的颜色集合</span>                
                </div>
            </div>
        </div> -->
    </div>
</template>

<style scoped lang="scss">
@use "../../../assets/styles/colorVar.scss" as *;
@use "sass:list" as list;
@use "sass:color" as color;

.color{
    width: 100%;
    padding: 0 50px;
    .header{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        .title{
            align-self: self-start;
            background: linear-gradient(
                to right,
                red,
                orange,
                yellow,
                green,
                blue,
                indigo,
                violet
            );
            background-clip: text;
            -webkit-text-fill-color:transparent;
            color:transparent;
            font-weight: bold;
            font-size: 50px;
        }
        .subtitle{
            color: $color-title-font;
            font-weight: bold;
            font-size: 30px;
            b{
                font-weight: bold;
                font-size: 30px;
                color:list.nth($color-level, 5);
            }
        }
        .text{
            color:#98989f;
            font-size: 20px;
        }
    }
    .colorScale{
        .headline{
            padding: 40px 0;
            .title{        
                display: flex;
                align-items: center;
                .left{
                    font-weight: bold;
                    font-size: 30px;
                    color:list.nth($color-level, 5);
                }
                .right{
                    font-size: 20px;
                    color:$color-primary-font;
                }
            }
            .tool{
                display: flex;
                align-items: center;
                column-gap: 10px;
                .left{
                    font-weight: bold;
                    font-size: 20px;
                    color:$color-primary-font;
                }
                .right{
                    font-size: 20px;
                    color:list.nth($color-level, 3);
                    text-decoration: underline;
                    cursor: pointer;
                    &:hover{
                        color: list.nth($color-level, 5);
                    }
                }
            }
        }
        .content{
            display: grid;
            grid-template-columns: 50% 50%;
            gap: 20px;
            .container{
                padding:20px;
                border-radius: 10px;
                border: 1px solid list.nth($color-level, 3);
                .top{
                    display: flex;
                    gap: 20px;
                    .start, .end{
                        display: flex;
                        align-items: center;
                        column-gap: 5px;
                        .left{
                            font-size: 18px;
                            color:$color-title-font;
                        }
                        .right{
                            width: 25px;
                            aspect-ratio: 1;
                            border-radius: 5px;
                        }                    
                    }
                    .name{
                        margin: auto;
                        span{
                            color:transparent;
                            font-weight: bold;
                            font-size: 20px;                            
                        }
                    }
                }
                .bottom{
                    .head{
                        padding: 10px 0;
                        font-size: 20px;
                        font-weight: bold; 
                        color: $color-primary-font;
                    }
                    .wrapper{
                        display: flex;
                        flex-wrap: wrap;
                        gap: 2px;
                        .item{
                            flex: 1;
                            aspect-ratio: 2/3;
                            border-radius: 5px;
                            transition: transform 0.2s ease-in-out;
                            &:hover{
                                transform: scale(1.05);
                            }
                        }
                    }
                    .footer{
                        display: flex;
                        flex-wrap: wrap;
                        .item{
                            flex: 1;
                            color:list.nth($color-level, 5);
                            text-align: center;
                        }
                    }
                }            
            }
        }        
    }
/*     .colorSystem{
        .headline{
            padding: 40px 0;
            .title{
                display: flex;
                align-items: center;
                column-gap: 10px;
                .left{
                    flex-shrink: 0;
                    font-weight: bold;
                    font-size: 30px;
                    color:list.nth($color-level, 5);
                }
                .right{
                    font-size: 20px;
                    color:$color-primary-font;
                }
            }
        }
    } */
}
</style>